<template>
	<view class="box">
		<!-- 搜索页 -->
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- 帮帮招才 -->
		</view>
		<view class="sousuo">
			<image src="https://pic.bangbangtongcheng.com/static/sousuo2.png" />
			<input type="text" v-model="search" placeholder="搜索" />
			<view class="quxiao" @click="searchList">搜索</view>
		</view>
		<view class="lishi" v-if="!ss && recordList.length > 0">
			<span style="font-size: 30rpx; color: #333333">历史记录</span>
			<image @click="delrecord" src="https://pic.bangbangtongcheng.com/static/shan.png" />
		</view>
		<view class="list1" v-if="!ss && recordList.length > 0">
			<view class="li" v-for="(i,j) in recordList" @click="recordC(i.searchContent)" :key="j">
				{{ i.searchContent}}
			</view>
		</view>
		<scroll-view class="list" :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 60px )'" scroll-y
			@scrolltolower="down" refresher-background="#f5f5f5" v-if="ss">
			<view class="vacancy" v-for="(item,index) in Recommend" @click="details(item)" :key="index">
				<view class="vehicleRecom">
					<span class="tagLabel">{{item.recruitmentType == 1?'全职':'兼职'}}</span>
					<span>{{item.title}}</span>
				</view>
				<view class="vacancy_center">
					<view class="vacancy_status">
						<span>{{item.region}}</span>
						<span>{{item.positionCategory}}</span>
					</view>
					<view class="vacancy_price" v-if="item.recruitmentType == 1">{{item.salaryRange == '面议'?'面议':item.salaryRange+'元'}}</view>
					<view class="vacancy_price" v-else>{{item.salaryRange.split(',').join('')}}&emsp;{{item.settlementMethod}}</view>
				</view>
				<view class="vacancy_biaoq"  v-if = 'item.fringeBenefits'>
					<view class="vacancy_label">
						<view class="shade">
							
						</view>
						<view class="label" v-for="(i,j) in item.fringeBenefits.split(',')" :key="j">{{i}}</view>
					</view>
					<view class="gend" v-if="item.fringeBenefits.split(',').length>4">
						更多>
					</view>
				</view>
				<view class="personalInformation" v-if="item.userInformation">
					<view class="personalInformation_left">
						<view class="GR">
							<image class="personalInformation_image" v-if="item.userInformation.image" :src="item.userInformation.image" mode=""></image>
							<image class="personalInformation_image" v-else src="https://pic.bangbangtongcheng.com/static/my/header.png" mode=""></image>
							<span class="name">{{item.userInformation.nikeName ? item.userInformation.nikeName : '未命名用户'}}</span>
						</view>
						<view class="GS" v-if="item.userInformation.enterpriseRecruitmentStatus">
							<view class="personalInformation_image"></view>
							<span class="corporation">{{item.enterpriseName}}</span>
						</view>
					</view>
					<view class="personalInformation_right">
						<span class="personalInformation_Time">{{$Time.getDateDiff(item.createDate)}}</span>
						<span class="personalInformation_distance" v-if="item.distance">{{item.distance}}km</span>
					</view>
				</view>
				<view class="personalInformation" v-else>
					<view class="personalInformation_left">
						<view class="GR">
							<image class="personalInformation_image" v-if="item.userInformationDto.image" :src="item.userInformationDto.image" mode=""></image>
							<image class="personalInformation_image" v-else src="https://pic.bangbangtongcheng.com/static/my/header.png" mode=""></image>
							<span class="name">{{item.userInformationDto.nikeName ? item.userInformationDto.nikeName : '未命名用户'}}</span>
						</view>
						<view class="GS" v-if="item.userInformationDto.enterpriseRecruitmentStatus">
							<view class="personalInformation_image"></view>
							<span class="corporation">{{item.enterpriseName}}</span>
						</view>
					</view>
					<view class="personalInformation_right">
						<span class="personalInformation_Time">{{$Time.getDateDiff(item.createDate)}}</span>
						<span class="personalInformation_distance" v-if="item.distance">{{item.distance}}km</span>
					</view>
				</view>
				<view class="HousCondition" v-if="searchlogType == 5">
					<view class=""></view>
					<view class="status">
						<view class="item" v-if="item.shelfStatus == 1">已上架</view>
						<view class="item" v-if="item.shelfStatus == 0">已下架</view>
						<view class="item" v-if="item.isShare == 2">已撤回</view>
						<view class="item" v-if="item.whetherTopHome == 1 || item.homeDisplay== 1">已置顶</view>
					</view>
				</view>
			</view>
			<view v-if="Recommend.length == 0" class="none">
				<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
				<view>没有更多数据了</view>
			</view>
			<view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
		</scroll-view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
	//  #endif
	export default {
		data() {
			return {
				statusBarHeight,
				recordList: [],
				search: "",
				Recommend: [],
				pageSize: 10,
				pageNo: 1,
				orderSort: "1",
				scrollTop: "0",
				trigger: false,
				downStatus: true,
				upStatus: true,
				imgUrl: this.$imgSrc,
				keyword: "",
				searchlogType: "",
				userInfo: uni.getStorageSync("Pduser"),
				ss: false,
			};
		},
		computed: {
			...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"])
		},
		onLoad(options) {
			if (options.searchType) {
				// searchType为从哪里跳转过来搜索的"1招才首页 ,2招才信息" 
				this.searchlogType = options.searchType;
			}
			this.gainRecord()
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		async onPullDownRefresh() {
			this.Recommend = [];
			this.pageNo = 1;
			this.downStatus = true;
			if (this.upStatus) {
				this.trigger = true;
				await this.getRecommend();
			}
		},
		methods: {
			recordC(text) {
				this.search = text;
				this.searchList();
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			back() {
				uni.navigateBack(-1);
			},
			details(item) {
				if(item.recruitmentType == 1){
					uni.navigateTo({
						url: "/pages_recruitMoney/recruitmentDetails/fullTime?id=" + item.id
					});
				}else{
					uni.navigateTo({
						url: "/pages_recruitMoney/recruitmentDetails/concurrently?id=" + item.id
					});
				}
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			async searchList() {
				uni.showLoading({
					title: '加载中',
					mask: false
				})
				this.keyword = this.search;
				this.ss = true;
				this.pageNo = 1;
				this.downStatus = true;
				this.Recommend = [];
				await this.getRecommend();
			},
			down() {
				if (this.downStatus) {
					this.pageNo++;
					this.getRecommend();
				}
			},
			async up() {
				this.Recommend = [];
				this.pageNo = 1;
				this.downStatus = true;
				if (this.upStatus) {
					this.trigger = true;
					await this.getRecommend();
				}
			},
			getRecommend() {
				this.upStatus = false;
				if (this.searchlogType == 1) {
					this.$myRequest
						.get("/api/mobile/personnelOwner/recruitmentHomepageSearch", {
							userId:this.userInfo.id,
							pageSize: this.pageSize,
							pageNo: this.pageNo,
							searchKeyword: this.keyword,
						})
						.then(res => {
							uni.hideLoading();
							if (!res.recruitmentHomepageSearch.pageList.length) {
								this.downStatus = false;
							}
							this.upStatus = true;
							this.trigger = false;
							this.Recommend = this.Recommend.concat(res.recruitmentHomepageSearch.pageList);
							uni.stopPullDownRefresh();
						});
				} else if (this.searchlogType == 2) {
					this.$myRequest
						.get("/api/mobile/personnelOwner/recruitmentSearch", {
							userId:this.userInfo.id,
							pageSize: this.pageSize,
							pageNo: this.pageNo,
							searchKeyword: this.keyword,
						})
						.then(res => {
							uni.hideLoading();
							if (!res.recruitmentSearch.pageList.length) {
								this.downStatus = false;
							}
							this.upStatus = true;
							this.trigger = false;
							this.Recommend = this.Recommend.concat(res.recruitmentSearch.pageList);
							uni.stopPullDownRefresh();
						});
				} else if(this.searchlogType == 3 || this.searchlogType == 4){
					this.$myRequest
						.get("/api/mobile/personnelOwner/getRecruitmentByRecruitmentType", {
							publisherId:this.userInfo.id,
							pageSize: this.pageSize,
							pageNo: this.pageNo,
							searchKeyword: this.keyword,
							recruitmentType:this.searchlogType == 3?'1':'2'
						})
						.then(res => {
							uni.hideLoading();
							if (!res.recruitmentInformation.pageList.length) {
								this.downStatus = false;
							}
							this.upStatus = true;
							this.trigger = false;
							this.Recommend = this.Recommend.concat(res.recruitmentInformation.pageList);
							uni.stopPullDownRefresh();
						});
				} else if(this.searchlogType == 5){
					this.$myRequest.get("/api/mobile/personnelOwner/getMyPostRecruitment",{
						userId:this.userInfo.id,
						recruitmentType:'',
						auditStatus:1,
						pageNo:this.pageNo,
						pageSize:this.pageSize,
						searchKeyword: this.keyword,
					}).then((res) => {
						uni.hideLoading();
						if (!res.recruitment.pageList.length) {
							that.downStatus = false;
						}
						this.upStatus = true;
						this.trigger = false;
						this.Recommend = this.Recommend.concat(res.recruitment.pageList);
						uni.stopPullDownRefresh();
					});
				}
				this.getrecord()
			},
			// 点击时添加历史记录
			getrecord() {
				this.$myRequest
					.post("/api/mobile/personnelOwner/increaseHistoricalSearchRecords", {
						userId: this.userInfo.id,
						searchContent: this.keyword,
						searchType: this.searchlogType + 1,
					})
					.then(res => {
						// this.recordList = res.list;
					});
			},
			// 获取历史记录
			gainRecord() {
				this.$myRequest
					.get("/api/mobile/personnelOwner/queryHistoricalSearchRecordsBysearchUsers", {
						userId: this.userInfo.id,
						searchType: this.searchlogType + 1,
						pageNo: 1,
						pageSize: 20,
					})
					.then(res => {
						this.recordList = res.HistoricalSearchRecordsList.pageList;
					});
			},
			delrecord() {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否清除所有搜索记录？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							this.$myRequest
								.post("/api/mobile/personnelOwner/oneClickClearHistoryRecords", {
									userId: this.userInfo.id,
									searchType: this.searchlogType + 1,
								})
								.then(res => {
									uni.showToast({
										title: "删除成功",
										icon: "none",
										mask: true
									});
									that.gainRecord();
								});
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.box {
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		color: #333;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		image {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}
	}

	.sousuo {
		position: relative;
		width: 686rpx;
		height: 72rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		border: 2rpx solid #64b6a8;
		border-radius: 36rpx;

		image {
			display: inline-block;
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
			margin-top: 12rpx;
		}

		input {
			display: inline-block;
			width: 400rpx;
			height: 50rpx;
			line-height: 52rpx;
			margin-top: 12rpx;
			vertical-align: top;
			font-size: 28rpx;
		}

		.quxiao {
			position: absolute;
			top: 4rpx;
			right: 4rpx;
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #fff;
			text-align: center;
			background: #64b6a8;
			border-radius: 30rpx;
		}
	}

	.lishi {
		position: relative;
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 50rpx;

		image {
			position: absolute;
			width: 58rpx;
			height: 58rpx;
			right: 0;
		}
	}
	.list {
		margin-top: 50rpx;
		margin-left: 30rpx;
		margin-left: 30rpx;
		width: 690rpx;
		.tit {
			color: #333333;
			font-size: 36rpx;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			width: 690rpx;

			.tg {
				color: #64b6a8;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				position: relative;

				.triangle {
					width: 0px;
					height: 0px;
					box-sizing: content-box;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
					border-bottom: 15rpx solid #64b6a8;
					margin-left: 20rpx;
					transition: all 0.5s;
				}

				.fan {
					transition: all 0.5s;
					transform: rotate(180deg);
				}

				.kuang {
					position: absolute;
					left: -240rpx;
					top: 120%;
					background: #fff;
					// transform: translateY(-50%);
					width: 330rpx;
					padding: 0 30rpx;
					z-index: 20;
					box-shadow: 0 0 8rpx 4rpx rgba(0, 0, 0, 0.3);

					.item {
						height: 90rpx;
						line-height: 90rpx;
						border-bottom: 2rpx solid #e0e0e0;
					}

					.item:last-child {
						border-bottom: 0;
					}
				}
			}
		}
		
		.vacancy{
			width: 100%;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1px solid #e0e0e0;
			.vehicleRecom{
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; //想要的行数
				-webkit-box-orient: vertical;
				.tagLabel{
					vertical-align: top;
					background: #64B6A8;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					width: 106rpx;
					margin-right: 10rpx;
					padding: 2rpx 6rpx;
					border-radius: 4rpx;
				}
			}
			.vacancy_center{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;
				.vacancy_status{
					span{
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
					span:nth-child(1){
						margin-right:16rpx ;
					}
				}
				.vacancy_price{
					font-size: 30rpx;
					font-weight: 550;
					color: #E00000;
				}
			}
			.vacancy_biaoq{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;
				.vacancy_label{
					flex: 1;
					height: 48rpx;
					position: relative;
					overflow: hidden;
					white-space : nowrap;
					.shade{
						position: absolute;
						right: 0;
						top: 0;
						width: 100rpx;
						height: 48rpx;
						background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
					}
					.label{
						display: inline-block;
						padding:10rpx;
						background-color:#f0f0f0;
						margin-right: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						border-radius: 4rpx;
					}
					.label:nth-last-child(1){
						margin-right: 0rpx;
					}
				}
				.gend{
					text-align: right;
					width: 80rpx;
					height: 100%;
					font-size: 24rpx;
					color: #888888;
				}
			}
			.personalInformation{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				.personalInformation_left{
					display: flex;
					flex-direction: column;
					.personalInformation_image{
						width: 42rpx;
						height: 42rpx;
						border-radius: 42rpx;
						margin-right: 12rpx;
					}
					.GR{
						display: flex;
						align-items: center;
						.name{
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
						}
					}
					.GS{
						display: flex;
						align-items: center;
						.corporation{
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
						}
					}
				}
				.personalInformation_right{
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					.personalInformation_Time{
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
						margin-bottom: 6rpx;
						text-align: right;
					}
					.personalInformation_distance{
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
						text-align: right;
					}
				}
			}
		}
	}

	.down {
		height: 60rpx;
		line-height: 60rpx;
		// border-top: 2rpx solid #d0d0d0;
		text-align: center;
	}

	.HousCondition {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.status {
			display: flex;
			align-items: center;

			.item {
				width: 96rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				border: 1px solid #64B6A8;
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #64B6A8;
				text-align: center;
				line-height: 48rpx;
			}
		}
	}

	.none {
		text-align: center;

		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}

		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}

	.sharer-say {
		// position: absolute;
		justify-content: space-between;
		align-items: center;
		bottom: -30rpx;
		right: 0;

		text {
			width: 400rpx;
			// flex: 11;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		view {
			// flex: 1;
			padding: 10rpx;
			color: #64b6a8;
		}
	}
	.list1 {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 32rpx;
	
		.li {
			display: inline-block;
			font-size: 26rpx;
			padding: 14rpx 26rpx;
			background-color: #f2f2f2;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			border-radius: 10rpx;
		}
	}
</style>
